import React from 'react'
import PropTypes from 'prop-types'
import { Select, Table, Form, Input, Button, Row, Col, message, Modal } from 'antd'
import classnames from 'classnames'
import styles from './List.less'

const { Option } = Select
const FormItem = Form.Item
const confirm = Modal.confirm

const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
  style: {
    marginBottom: 10
  }
}

const DataList = ({
  location,
  handleChange,
  onFilterChange,
  selectedRowOfWhiteList,
  handleAddWhiteList,
  onOk,
  form: {
    getFieldDecorator,
    getFieldsValue,
    setFieldsValue,
  },
  ...tableProps
}) => {


  const columns = [
    {
      title: '微信号',
      dataIndex: 'wechatId',
      key: 'wechatId',
      width: 100,
    },
    {
      title: '操作人',
      dataIndex: 'operatorName',
      key: 'operatorName',
      width: 100,
    },
    {
      title: '操作时间',
      dataIndex: 'operationTime',
      key: 'operationTime',
      width: 100,
    },
    {
      title: '说明',
      dataIndex: 'description',
      key: 'description',
    },
  ]

  const handleSubmit = () => {
    let fields = getFieldsValue()
    onFilterChange(fields)
  }

  const handleFormReset = () => {
    let fields = getFieldsValue()
    fields.wechatId = ''
    fields.description = ''
    setFieldsValue(fields)
    onFilterChange()
  }

  const handleAdd = () => {
    let fields = getFieldsValue()
    console.log('fields', fields)
    if (!fields.wechatId || !fields.description) {
      message.error("请先输入微信号和说明哦")
      return
    }
    handleAddWhiteList(fields)
  }

  const handleOnOk = () => {
    let ids = selectedRowOfWhiteList.map(item => item.id)
    onOk(ids)
  }

  const showConfirm = () => {
    confirm({
      title: "你确定要删除以下白名单吗?",
      onOk: handleOnOk,
      onCancel() {
        console.log('Cancel')
      }
    })
  }



  const handleDelete = () => {
    if (selectedRowOfWhiteList.length === 0) {
      message.error("您还未选择要删除的条目哦!")
      return
    }
    showConfirm()
  }

  return (
    <div>
      <Row gutter={24}>
        <Col md={6}>
          <FormItem label="微信号" {...formItemLayout}>
            {getFieldDecorator('wechatId')(<Input style={{ width: "100%" }} placeholder="运营微信号" />)}
          </FormItem>
        </Col>
        <Col md={6}>
          <FormItem label="说明" {...formItemLayout}>
            {getFieldDecorator('description')(<Input style={{ width: "100%" }} placeholder="运营微信号" />)}
          </FormItem>
        </Col>
        <Col md={12}>
          <Button type="primary" style={{ marginRight: 10 }} onClick={handleSubmit}>查询</Button>
          <Button type="primary" style={{ marginRight: 10 }} onClick={handleFormReset}>重置</Button>
          <Button type="primary" style={{ marginRight: 10 }} onClick={handleAdd}>添加</Button>
          <Button type="danger" onClick={handleDelete}>删除</Button>
        </Col>
      </Row>
      <Table
        {...tableProps}
        className={classnames(styles.table)}
        columns={columns}
        simple
      />
    </div>
  )
}

DataList.propTypes = {
  roles: PropTypes.array,
  handleRoleMenuClick: PropTypes.func,
}

export default Form.create()(DataList)
